<template>
  <div class="container">
    <div id="cesiumContainer" ref="earthContainer"></div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 创建地球
      let earth = new XE.Earth(this.$refs.earthContainer, {
        selectionIndicator: true,
        infoBox: false,
      });

      Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWI2ZTA4Yy04NGM3LTQxODItOGFiYS1kNmZiNGYyNDY0NzQiLCJpZCI6Mzk2MSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTUzOTQwNzAzMX0.okbBR7vmM5YvSjAxKTAqvLjsG5eELUJYacmrpMUkx3Q'


      this._earth = earth;
      window.earth = earth;
      this.controlImagerLayer(
        'http://t1.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=919e3ee2639d547b659a42a441d33ad7'
      )
      this.controlImagerLayer(
        'http://t1.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=919e3ee2639d547b659a42a441d33ad7'
      )
      // this.controlTerrain('http://yuan.giseden.xyz:2201/dem')
      this.addGlobalTerrian();
    },
    // #region 影像图层控制
    controlImagerLayer (url) {
      const imager = arguments[1]
      if (
        this.containsKey(this._earth.sceneTree.$refs, url) &&
        this._earth.sceneTree.$refs[url].czmObject._imageryLayer
          ._imageryProvider.url !== ''
      ) {
        this.deleteImagerLayer(url)
      } else {
        this.addImagerLayer(url, imager)
      }
    },
    addImagerLayer (url) {
      const imager = arguments[1]
      let imagerObj
      if (typeof imager === 'undefined') {
        imagerObj = {
          ref: url,
          czmObject: {
            name: url,
            xbsjType: 'Imagery',
            xbsjImageryProvider: {
              XbsjImageryProvider: {
                url: url,
                srcCoordType: 'WGS84',
                dstCoordType: 'WGS84'
              }
            }
          }
        }
      } else {
        imagerObj = imager
      }

      if (this._earth.sceneTree.$refs[url]) {
        this._earth.sceneTree.$refs[url].czmObject = imagerObj.czmObject
      } else {
        this._earth.sceneTree.root.children.push(imagerObj)
      }
    },
    deleteImagerLayer (url) {
      this._earth.sceneTree.$refs[url].czmObject = {}
    },
    containsKey (obj, key) {
      let result = false
      for (const k in obj) {
        if (k === key) {
          result = true
          break
        }
      }
      return result
    },
    // #endregion

    // #region 地形数据控制
    controlTerrain (url) {
      if (
        //url = 'http://yuan.giseden.xyz:2201/dem'
        this.containsKey(this._earth.sceneTree.$refs, url) &&
        this._earth.sceneTree.$refs[url].czmObject._terrainProvider._layers[0]
          .resource._url !== ''
      ) {
        this.removeTerrain(url)
      } else {
        this.addTerrain(url)
      }
    },
    addTerrain (url) {
      const terrain = {
        ref: url,
        czmObject: {
          xbsjType: 'Terrain',
          name: url,
          xbsjTerrainProvider: {
            type: 'XbsjCesiumTerrainProvider',
            XbsjCesiumTerrainProvider: {
              url: url,
              requestVertexNormals: true,
              requestWaterMask: true
            }
          }
        }
      }
      if (this._earth.sceneTree.$refs[url]) {
        this._earth.sceneTree.$refs[url].czmObject = terrain.czmObject
      } else {
        this._earth.sceneTree.root.children.push(terrain)
      }
    },
    removeTerrain (url) {
      this._earth.sceneTree.$refs[url].czmObject = {}
    },
    addGlobalTerrian () {
      // eslint-disable-next-line
      this._earth._viewer.terrainProvider = new Cesium.createWorldTerrain({
      // eslint-disable-next-line
        url: Cesium.IonResource.fromAssetId(1),
        requestWaterMask: true,
        requestVertexNormals: true
      })
    },
    removeGlobalTerrian () {
      // eslint-disable-next-line
      this._earth._viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider()
    }
    // #endregion

    
  },
};
</script>
